<template>
    <div class="houseContent">
        <top>
            <template #houseTop>
                <div class="title">
                        {{ title }}
                 </div>
            </template>
        </top>
        <nav-title>
                               <template #houseTitle="parentName">
            <div class="top" >
            <div class="title clear" >
                <ul>
                    <li v-for="(item,index) in parentName.childrenName" :key="index" @click="flag=!flag" >
                        <router-link to="">{{ item }}</router-link>
                    </li>
                </ul>
            </div>
            <div class="search">
                <input type="text" placeholder="搜索现场">
            </div>
        </div>
  </template>
        </nav-title>
           <main-box>
          <template #mainBoxHouse="parentName">
                      <div class="tab" v-if="flag">
            <div class="item"  v-for="(house,index) in parentName.childName" :key="index">{{ house }}</div>
        </div>
           </template>
           <template #mainBoxHouseList="parentName">
                  <div class="mainCon">
             <div class="lists"  >
                  <div class="item" v-for="(item,index) in parentName.childName" :key="index"  @click.stop="active=!active">
                     
                          <div class="img">
                              <div class="backImage"  :style="item.img"></div>
                              <div class="mark"  @click.stop="markBtn">
                                <img  v-if="markDown" src="../../assets/images/mark/heart2.png" alt="" >
                                <img  v-else src="../../assets/images/mark/heart1.png" alt="" >
                              
                           
                              </div>
                          </div>
                    
                      <div class="house_text"  >
                          <div class="h1">
                              <div class="h1_1">苏州洲际酒店</div>
                              <div class="h1_2">吴中区</div>
                          </div>
                          <div class="h2">
                              <div class="h2_0">独墅湖景</div>
                               <div class="h2_0">东南亚风</div>
                                <div class="h2_0">地铁沿线</div>
                          </div>
                      </div>
                  </div>
             </div>
         </div> 
           </template>
        </main-box>
                <houseCover v-if="active">
 
          <template #del>
         
                  <div class="del" @click="goBack"></div>
            
          </template>
                   <!-- <template #showImg="parentName">

  
          </template> -->
          <template #sidebar="parentName">
            <div class="tabbar">
                       <div class="main">
            <div class="box">
              <div class="title">
                <div class="name">
                  <div class="name-h">
                      <h3>苏州新世纪大酒店</h3>
                          <div class="text">
                    姑苏区 | 四星酒店
                  </div>
                  </div>
                  <div class="name-mark"></div>
                </div>
              </div>
                </div>
                        <div class="info_right">
                <div class="head">
              
                    <div class="adress">
                      广济路28号
                    </div>
                    <div class="lists">
                      <div class="list">地铁沿线</div>
                      <div class="list">设施完善</div>
                      <div class="list">中央商圈</div>
                    </div>
                </div>
                <div class="vitae">
                 酒店拥有设备精良、功能齐全的会议设施和类型丰富的娱乐设施,商务中心可提供全天候礼宾及管家服务,酒店以绿色环保为主题,在繁华闹市中另辟一处绿洲.
                </div>
              </div>
              </div>
            </div>
          </template> 
        </houseCover>
    </div>
</template>
<script>
import top from "../top";
import navTitle from "../navTitle";
import mainBox from "../mainBox";
import houseCover from "../houseCover/houseCover";
export default {
  data() {
    return {
      title: "婚宴酒店",
      flag: false,
      active: false,
      markDown: 0
    };
  },
  components: {
    top,
    navTitle,
    mainBox,
    houseCover
  },
  methods: {
        goBack() {
      this.active = false;
    },
    markBtn() {
      if (this.markDown == 0) {
        this.markDown = 1;
      } else {
        this.markDown = 0;
      }
    }
  }
};
</script>
<style scoped>
@import url("../../assets/font/iconfont.css");
@import url("../../assets/css/base.css");
.houseContent {
  position: relative;
}
/deep/ header .logo::before {
  content: "\e622";
  font-family: "iconfont";
  font-size: 20px;
  color: #fff;
  line-height: 60px;
}
/deep/ header .logo img {
  display: none;
}
/deep/ header .logo a {
  display: none;
}
/deep/ header .title {
  width: 100px;
  height: 100%;
  text-align: center;
  color: #fff;
  font-size: 20px;
  margin: 0 auto;
}
.nav .top .title li:first-child::after {
  content: "\e60b";
  font-family: "iconfont";
  font-size: 25px;
  position: absolute;
  left: 80%;
  top: -20px;
  color: #e7367d;
}
.nav .top .title li:nth-child(2)::after {
  content: "\e6e9";
  font-family: "iconfont";
  font-size: 25px;
  position: absolute;
  left: 80%;
  top: -20px;
  color: #fff;
}
.tabbar {
  /* display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%; */
}
.del {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 35px;
  top: 15px;
  /* background-color: #121212; */
}
.del::before {
  content: "\e62d";
  font-family: "iconfont";
  font-size: 16px;
  color: #fff;
  text-align: center;
  line-height: 50px;
}
.main {
  margin: 60px 40px 0 40px;
  background-color: #202020;
}
.box {
 
  border-bottom: 1px solid #ccc;
}
.box .name {
  display: flex;
  justify-content: space-between;
 padding-bottom: 20px;
}
.box .name .name-h h3 {
  font-size: 18px;
  color: #fff;
}
.box .name .name-h .text {
  color: #5c5c5c;
  font-size: 14px;
}
.box .name-mark::after {
  content: "\e772";
  font-family: "iconfont";
  color: red;
  font-size: 20px;
}

.info_right {
  width: 100%;
  height: 100%;
  margin-top: 40px;
}
.info_right .head {

}
.info_right .head .adress {
  display: flex;
width: 100%;
height: 100%;
 justify-content: flex-start;
  color: #fff;
  margin-left: 5px;
}
.info_right .head .adress::before{
  content:'\e626';
  font-family: "iconfont";
  font-size: 14px;
}
.info_right .lists{
  margin-top: 40px;
display: flex;
justify-content:flex-start;

}
.info_right .lists .list{
  font-size: 12px;
      color: #fff;
margin-right: 10px;
  
  background-color: #2E2E2E;
  padding: 3px 5px;
}
.vitae {
  margin-top: 20px;
  color: #fff;
  font-size: 14px;
}
</style>

